<template>
    <div class="person">
        <h2>姓：<input type="text" v-model="firstName"></h2>
        <h2>名：<input type="text" v-model="lastName"></h2>
        <button @click="changeFullName">改全名</button>
        <span>{{ fullName }}</span>
    </div>
</template>

<script lang="ts" setup>
    import { computed, ref } from 'vue';
    const firstName = ref('张')
    const lastName = ref('三')
    //计算属性是只读属性
    // const fullName = computed(() => {
    //     return firstName.value.slice(0, 1).toUpperCase() + firstName.value.slice(1) + lastName.value
    // })
    //这样定义的计算属性可读可写    
    const fullName = computed({
        get(){
            return firstName.value.slice(0, 1).toUpperCase() + firstName.value.slice(1) + '-' +  lastName.value
        },
        set(val){
            [firstName.value, lastName.value] = val.split('-')
        }
    })

    function changeFullName() {
        fullName.value = '国服-小虾米'
    }
</script>

<style scoped>
.person {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}
</style>